<template>
    <div>
        <div v-if="!newsData || !newsData.records || newsData.records.length === 0" class="no-data">
            暂无新闻数据
        </div>
        <div v-else>
            <div v-for="(news, index) in newsData.records" :key="news.id" class="box"
                :class="{ 'last-item': index === newsData.records.length - 1 }" @click.stop="handleNewsClick(news)">
                <div class="title">
                    <p class="l-title" :style="{
                        'background-color': tabEnums.find(item => item.value === news.classReal)?.color
                        , 'border': 'none'
                    }
                        ">
                        {{tabEnums.find(item => item.value === news.classReal)?.label}}</p>
                    <h3 class="b-title">{{ news.title }}</h3>
                </div>
                <div class="content">{{ news.abstractReal }}</div>
                <div class="bottom">
                    <div>
                        <p class="img">
                            <img :src="news.coverImage" class="img1" />
                        </p>
                        <p>{{ news.siteName }} {{ news.opPerson ? '·由' + news.opPerson + '更新' : '' }}</p>
                        <p>{{ news.createTime }}</p>
                    </div>
                    <div>
                        <el-button v-if="news.isPublished" type="info" link v-permission="['write']">{{ news.pubTime }} 已发布</el-button>
                        <el-button link :icon="Plus" v-if="news.isSelect === 0" class="pub"
                            @click="emits('add', news.id)" v-permission="['write']">
                            加入待发布
                        </el-button>
                        <el-button link :icon="Minus" v-if="news.isSelect === 1" class="pub"
                            @click="emits('remove', news.id)" v-permission="['write']">
                            移除
                        </el-button>

                        <template class="edit">
                            <el-button link @click.stop="drawerStates[news.id] = true"
                                style="background-color: white;border: none;color: blue;" @click="emits('edit', news)"
                                v-permission="['write']"
                            >
                                编辑 
                            </el-button>
                            <el-drawer v-model="drawerStates[news.id]" title="I am the title" :with-header="false"
                                size="70%">
                                <Edit mode="edit" :data="news" @close="drawerStates[news.id] = false"
                                    @refresh="emits('refresh')"></Edit>
                            </el-drawer>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
import Edit from './Edit.vue';
const emits = defineEmits(['add', 'remove', 'click', 'refresh', 'edit'])
import { Minus, Plus } from '@element-plus/icons-vue'


const currentTag = computed(() => tabEnums.find(item => item.value === props.newsData.classReal)?.key)

const tabEnums = [
    { color: '#83DAAD', label: '宏观形势', value: 1, key: 'macroEnvironment' },
    { color: '#EDBF45', label: '行业动态', value: 2, key: 'industryTrends' },
    { color: '#8E63B7', label: '产业链动态', value: 3, key: 'supplyChainDynamics' },
    { color: '#E8954F', label: '国际能源观察', value: 4, key: 'internationalEnergy' },
    { color: '#697798', label: '其他', value: 5, key: 'other' },
]
const props = defineProps({
    newsData: {
        type: Object,
        default: () => ({
            records: [],
            total: 0
        })
    }
});

const drawerStates = ref({})
const handleNewsClick = (news) => {
    emits('click', news)
}

</script>

<style scoped>
.box {
    height: auto;
    min-height: 100px;
    border: 1px solid #eee;
    margin-left: 0;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.last-item {
    margin-bottom: 0;
}

.no-data {
    text-align: center;
    padding: 20px;
    color: #999;
    width: 100%;
    box-sizing: border-box;
}

.title {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    width: 100%;
    box-sizing: border-box;
}

.l-title {
    padding: 5px 8px;
    border: 1px solid orange;
    background-color: orange;
    color: white;
    border-radius: 10px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
}

.b-title {
    margin-left: 12px;
    margin: 0 0 0 12px;
    font-size: 16px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content {
    height: 20px;
    line-height: 20px;
    color: gray;
    font-size: 14px;
    margin-left: 5px;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img1 {
    margin-top: 3px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bottom {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    font-size: 14px;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
}

.bottom>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pub {
    margin: 0;
    color: blue;
    white-space: nowrap;
}

.edit {
    margin-left: 8px;
    display: flex;
}

.el-button {
    padding: 6px 12px;
    font-size: 14px;
}
</style>